<template>
	<view>
		<cu-custom :isBack="false" bgColor="bg-black-two">
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="my-bg">
			<view class="text-right">
				<button @click="showModal('tabModel')" class="cu-btn confirm-btn" style="background-color:#22B573;width: 20%;margin-right: 19px;
    margin-top: 15px;">
					充值
				</button>
			</view>
			<view @click="linktoPage('/pages/center/yue/yue')" class="flex justify-between my-title-bg">
				<view>余额</view>
				<view>
					<text>{{yue}}</text>
					<text>元</text>
					<text class="lg my-title-icon" :class="'cuIcon-right'"></text>
				</view>
			</view>			
			<view @click="linktoPage('/pages/center/jifen/jifen')" class="flex justify-between my-title-bg">
				<view>积分</view>
				<view>
					<text>{{Number(jifen)}}</text>
					<text class="lg my-title-icon cuIcon-right"></text>
				</view>
			</view>			
			<view @click="linktoPage('/pages/center/fapiao/fapiao-list')" class="flex justify-between my-title-bg">
				<view>开票管理</view>
				<view>
					<text class="lg my-title-icon cuIcon-right"></text>
				</view>
			</view>
			<view @click="linktoPage('/pages/center/address/address-list')" class="flex justify-between my-title-bg">
				<view>收货地址管理</view>
				<view>
					<text class="lg my-title-icon cuIcon-right"></text>
				</view>
			</view>
			<view @click="linktoPage('/pages/center/help-center/help-center')" class="flex justify-between my-title-bg">
				<view>帮助中心</view>
				<view>
					<text class="lg my-title-icon cuIcon-right"></text>
				</view>
			</view>
			<view class="flex justify-between my-title-bg" style="border: unset;">
				<view>当前登录用户</view>
				<view>
					{{userName}}
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button  @click="cleanUserInfo()" class="cu-btn round bg-green-two" style="height: 45px;font-size: 14px;">退出登录</button>
		</view>
		
		
		<!-- 模态框：点击充值按钮显示个人充值、企业支付 -->
		<view class="cu-modal" :class="modalName=='tabModel'?'show':''" style="z-index: 0;">
			<view class="cu-dialog" style="background-color:#FFF;height:310px;">
				<view style="width:90%;margin:0 auto;">
					<view class="flex">
						<scroll-view scroll-x class="bg-white nav text-center">
							<view class="cu-item" :class="index==TabCur?'text-blue cur':''" 
								v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
								{{item}}
							</view>
						</scroll-view>	
						<view class="action" @tap="hideModal" style="padding-top: 10px;">
							<text class="cuIcon-close text-blue text-lg" style="color: #847d7d;"></text>
						</view>
					</view>
					
					<!-- TabCur：0 个人支付 -->
					<view v-if="!TabCur" style="padding-top: 15px;">
						<view class="open-block" style="padding-bottom: 10px;text-align: left;color: #100f0f;">
							<view style="margin-top:20px;padding: 20px 45px;">
								<view>
									<view style="padding-bottom: 5px;">
										请输入充值金额（元）
									</view>
									<view>
										<input class="uni-input"
										v-model='chongzhiNumber' style="color:#00A99D;font-size:18px;" type="number"></input>
										<view style="height: 1px;background-color: #00A99D;margin:10px auto"></view>
									</view>
								</view>
						</view>
						<view class="flex flex-wrap justify-between align-center" style="width:220px;margin:24px auto;">
							<button @click="hideModal()" class="cu-btn out-btn" style="background-color:#fff;border: 1px solid #00A99D;">取消</button>
							<button @click="checkAuth()" class="cu-btn confirm-btn" style="background-color:#00A99D;width: 45%;">确认充值</button>
						</view>
					</view>
					</view>
					<!-- TabCur：1 企业支付 -->
					<view v-else class="text-black-two" style="margin-top: 15px;">
						<view class="company-pay">收款卡号</view>
						<view class="company-pay text-lg text-bold">1105020209000329330</view>
						<view class="company-pay">收款户名</view>
						<view class="company-pay">常州多博特机器人科技股份有限公司</view>
						<view class="company-pay">开户银行</view>
						<view class="company-pay">中国工商银行股份有限公司常州经济开发区支行</view>
						<view class="company-pay" @click="setCopy()">
							<text class="cuIcon-copy text-green-two" style="font-size: 20px;"></text>
							<text class="text-green-two text-lg">复制</text>
						</view>
					</view>
				</view>
			</view>
		</view>	
		
		<!-- 授权提示框 -->
		<view class="cu-modal" :class="tipModalName=='auth'?'show':''" style="z-index: 1111;">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">授权提醒</view>
				</view>
				<view class="margin-bottom-sm" style="padding: 15px 0px;">
					<view>
						<text style="font-size: 15px;">
							请授权昵称、头像等公开信息
						</text>
					</view>
					<view class="" style="font-size: 15px;">
						以便为您提供更好的服务
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="justify-content: center;height: 80px;">
					<button  @click="confirmAuth()" class="cu-btn round bg-green-two padding-lr-lg" style="width: 50%;height: 45px;">允许</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self;
	export default{
		data(){
			return{
				userName:'111',
				yue:0,//当前余额
				jifen:0,//当前积分
				//tab导航栏
				TabCur: 0,
				scrollLeft: 0,
				tabList:['个人支付','企业支付'],
				//模态框
				modalName:'',
				chongzhiNumber:'',//充值金额
				//企业信息
				companyPayList:{
					bankCode:"123456123456789789456",
					bankName:"中国工商银行股份有限公司常州经济开发区支行",
					companyName:"常州多博特机器人科技股份有限公司"
				},
				tipModalName:''
			}
		},
		onShow() {
			_self = this;		
			//获取当前登录用户名称
			this.userName =  uni.getStorageSync("userinfo").username;
			//获取当前余额和积分
			this.getInitData();
		},
		methods:{
			// 获取用户当前余额和积分
			async getInitData(){
				//uni.showLoading({ title: '加载中...', mask: true });
				// 请求
				let [err,res] = await this.$http.get('getUserInfo',{},{
					token:true,
					checkToken:true ,
				});
				uni.hideLoading();
				//当前登录用户余额
				this.yue = res.data.data.money;
				//当前登录用户积分
				this.jifen = res.data.data.jifen;
				
				//更新本地存储的余额和积分
				let userinfo = uni.getStorageSync("userinfo");
				userinfo.money = res.data.data.money;
				userinfo.jifen = res.data.data.jifen;
				uni.setStorageSync("userinfo",userinfo);
			},
			
			//退出登录
			cleanUserInfo(){				
				uni.clearStorage();//清理本地数据缓存
				uni.redirectTo({
				    url: '/pages/login/login'
				});
			},

			//跳转页面
			linktoPage(urlStr){
				uni.navigateTo({
					url:urlStr
				})
			},
			clearModule(){
				let paramsArray = {};
				requestPost('clearModule',paramsArray,function(res){
					if (res.data.status !== "false") {
						uni.showToast({
							title:'清除模块订单成功',
							icon:'success'
						})
					}
				});
			},
			
			//tab导航栏
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.chongzhiNumber = '';
			},
			//打开模态框
			showModal(name){
				this.modalName=name
			},
			//关闭模态狂
			hideModal() {
				this.modalName = null;
				this.chongzhiNumber = '';
			},
			//充值-微信支付
			wxpayAuth(){
				if(Number(this.chongzhiNumber) < 1){
					uni.showToast({
					title:"请输入金额",
					icon:'error'
					})
					return;
				}
				uni.showLoading({
					title:'正在充值..',
					mask:true
				})
				uni.request({
					url: 'https://new.dascloud.cn/front/user/wxlogin',
					method: 'GET',
					data:{
						user_id:uni.getStorageSync("userinfo").id,
						number:this.chongzhiNumber
					},
					header: {  
						'Content-Type': 'application/x-www-form-urlencoded'  
					},
					//sslVerify: false,//本地模拟器调试
					success: pay => {
						uni.hideLoading();
						_self.modalName = null;
						_self.chongzhiNumber = '';
						console.log(pay);

						uni.requestPayment({
							timeStamp: pay.data.timeStamp,
							nonceStr: pay.data.nonceStr,
							package: pay.data.package,
							signType: pay.data.signType,
							paySign: pay.data.paySign,
							success: function (res) {
								uni.showToast({
									title:'充值成功',
									icon:'success'
								});    
								 console.log('sassss');  
								/* setTimeout(function () {
									_self.modalName = null;
									_self.chongzhiNumber = '';
								}, 2000); */
								_self.getInitData();//更新余额
								console.log('success:' + JSON.stringify(res));
							},
							fail: function (err) {
								uni.showToast({
									title:'充值失败',
									icon:'error'
								});
								_self.modalName = null;
								_self.chongzhiNumber = '';
								_self.getInitData();
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			setCopy(){
				var strText = "";
				strText += "收款卡号：\n"+this.companyPayList.bankCode+"\n";
				strText += "收款户名：\n"+this.companyPayList.companyName+"\n";
				strText += "开户银行：\n"+this.companyPayList.bankName;
				uni.setClipboardData({
					data: strText, //要被复制的内容
					success: () => { //复制成功的回调函数
						console.log('复制成功');
						console.log(strText);
					}
				});
			},
			//验证用户是否授权
			async checkAuth(){
				//判断是否授权，未授权则弹出授权框
				let userId = uni.getStorageSync("userinfo").id;
				uni.showLoading({ title: '加载中...', mask: true });
				// 请求
				let [err,res] = await this.$http.post('getUserSingle',{user_id:userId},{
					token:true,
					checkToken:true ,
				});
				// 请求失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				if (res.data.data.open_id == "0") {
					//未授权，弹出授权框
					this.showAuthModal('auth');
					console.log('未授权');
					//uni.hideTabBar();//隐藏底部tabBar
				} else {
					this.wxpayAuth();
				}	
			},
			//打开授权模态框
			showAuthModal(name){
				this.tipModalName=name;
			},
			hideAuthModal(){
				this.tipModalName = null;
			},
			//允许授权，获取openid
			confirmAuth(){
				uni.login({
					success:(r)=>{
						console.log(r);
						_self.updateUser(uni.getStorageSync("userinfo").id,r.code);
					},
					fail:(err) => {
						console.log(err);
					}
				});
			},
			async updateUser(userId,code){
				uni.showLoading({ title: '加载中...', mask: true });
				// 请求登录
				let [err,res] = await this.$http.post('updateUserInfo',{
					user_id:userId,
					code:code
					},{
					token:true,
					checkToken:true ,
				});
				// 登录失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				if (res.data.msg == '授权成功') {
					//授权成功
					uni.showToast({
						title:'授权成功',
						icon:'success'
					});
					this.hideAuthModal();
					//uni.showTabBar();//显示底部tabBar
				} else {
					//授权失败
					uni.showToast({
						title:'授权失败',
						icon:'error'
					});
					this.hideAuthModal();
					//uni.showTabBar();
				}
			},
		}
		
	}
</script>

<style>
	
</style>